<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 7]> <html xmlns="http://www.w3.org/1999/xhtml" class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html xmlns="http://www.w3.org/1999/xhtml" class="ie8 oldie"> <![endif]-->
<!--[if IE 9]> <html xmlns="http://www.w3.org/1999/xhtml" class="ie9"> <![endif]-->
<!--[if gt IE 9]> --> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alumni - Online Community</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
</head>

<body>
	<div class="container">
    	<div class="top-bar clearfix">
        	<ul>
				<li>
                	<a href="#">
	                    Welcome	
                    </a>
                </li>
                <li>
                	<a href="#">
                    	Contact
                    </a>
                </li>
                <li>
                	<a href="#">
                    	Log In
                    </a>
                </li>
			</ul>
        </div>
        <div class="header clearfix">
        	<h1 class="logo">
        	<a href="#">
            	Future University
                <span></span>
            </a>
        </h1>
        	<h1>
            <a href="home.html" class="center-name">
                Alumni
                <span>
                	
                </span>
            </a>
            </h1>
            
            <div class="search">
            	<div class="form">
                	<input type="text" placeholder="enter search item" />
                    <input type="submit" value="Search" />
                </div>
                
            </div>
        </div>
        
        <div class="inner-content">
        	<div class="inner-banner">
            	<img src="images/inner-banner.jpg" alt="" />
            </div>
            <div class="side-menu">
            	<ul>
                	<li>
                    	<a href="home.html">
                        	Home
                        </a>
                    </li>
                    <li>
                    	<a href="alumni-spotlight.html">
                        	Alumni Spotlight
                        </a>
                    </li>
                    <li class="current">
                    	<a href="online-community.html">
                        	Online Community
                        </a>
                    </li>
                    <li>
                    	<a href="lost-alumni.html">
                        	Lost Alumni
                        </a>
                    </li>
                    <li>
                    	<a href="alumni-awards.html">
                        	Alumni Awards
                        </a>
                    </li>
                    <li >
                    	<a href="alumni-services.html">
                        	Alumni Services
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main-column">
            	<div class="breadcrumb clearfix">
                	<ul>
                    	<li>
                        	<a href="#">
                        		Home
                        	</a>
                        </li>
                        <li>
                        	<a href="#">
                        		Alumni Services
                        	</a>
                        </li>
                        <li>
                        	<a href="#">
                        		ID Cards
                        	</a>
                        </li>
                    </ul>
                </div>
                <div class="left-content">
                	<h2>Online Community</h2>
                    
                    <p>
                    	The Alumni Office was established in 2010; its mission is to effectively serve and support the alumni of the Future University in Egypt and to ensure the continued connection with alumni and their engagement in the life of the university.
                    </p>
                   
                   <div class="gray-box register">
                   		<h3>Register to Become a Member</h3>
                        <h4>
                        	title here
                        </h4>
                        <div class="row clearfix">
                        	<label>Text Field:</label>
                            <input type="text" />
                        </div>
                        <div class="row clearfix">
                        	<label>Radio:</label>
                            <label class="radio clearfix">
                            	<input type="radio" name="radio1" />
                                option1
                            </label>
                            <label class="radio clearfix">
                            	<input type="radio" name="radio1" />
                                option1
                            </label>
                        </div>
                        <div class="row clearfix birth">
                        	<label>Date of Birth:</label>
                        	<select>
                            	<option>Day</option>
                                <option></option>
                            </select>
                            <select>
                            	<option>Month</option>
                                <option></option>
                            </select>
                            <select>
                            	<option>Year</option>
                                <option></option>
                            </select>
                        </div>
                        
                        <div class="row clearfix">
                        	<label>Select:</label>
                            <select>
                            	<option>Egypt</option>
                                <option></option>
                            </select>
                        </div>
                        
                        <div class="row clearfix graduate">
                        	<label>text and select:</label>
                            <select>
                            	
                            </select>
                            <input type="text" />
                        </div>
                        
                        <hr />
                        <h4>
                        	Title
                        </h4>
                     <div class="row clearfix">
                   	   <label>
                            	checkbox Group:
                         </label>
                       <table width="200" class="department">
                              <tr>
                                <td><label>
                                  <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />
                                  checkbox</label></td>
                              </tr>
                              <tr>
                                <td><label>
                                  <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />
                                  checkbox</label></td>
                              </tr>
                              <tr>
                                <td><label>
                                  <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />
                                  checkbox</label></td>
                              </tr>
                              
                       </table>
                       </div>
                       <hr />
                       <div class="row clearfix">
                       		<input type="submit" value="Submit Registration" />
                       </div>
                   </div>
                </div>
                <div class="right-content">
                	<h4>Alumni Spotlight</h4>
                    <ul class="side-news">
                    	<li>
                            <h4>
                            	<a href="#">
                                	Events & Chapters Activities
                                </a>
                            </h4>
                            <p>
                            	We offer a world of opportunity that students with dreams as big as yours.
                            </p>
                        </li>
                        <li>
                            <h4>
                            	<a href="#">
                                	Events & Chapters Activities
                                </a>
                            </h4>
                            <p>
                            	We offer a world of opportunity that students with dreams as big as yours.
                            </p>
                        </li>
                        <li>
                            <h4>
                            	<a href="#">
                                	Events & Chapters Activities
                                </a>
                            </h4>
                            <p>
                            	We offer a world of opportunity that students with dreams as big as yours.
                            </p>
                        </li>
                    </ul>
                	<div class="widget clearfix">
                	<h4>social media</h4>
                    <div class="social">
                    	<a href="" class="twitter"></a>
                        <a href="" class="facebook"></a>
                        <a href="" class="youtube"></a>
                    </div>
                </div>
                
                </div>
            </div>
        </div>
        
        
        
        <div class="footer clearfix">
        	<a href="#" class="footer-logo"></a>
            <div class="footer-right">
            <div class="copyright">
            	Copyright &copy; Welcome to Future University Alumni Website. All Rights Reserved
            </div>
            <ul class="footer-menu">
            	<li>
                	<a href="home.html">Home</a>
                </li>
                <li>
                	<a href="welcome.html">Welcome</a>
                </li>
                <li>
                	<a href="contact_us.html">Contact Us</a>
                </li>
                <li>
                	<a href="sitemap.html">Sitemap</a>
                </li>
              <li>
                	<a href="#">Login</a>
                </li>
            </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
